<html>
    <head>
        <title>Admin</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="utf-8" />
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script>
            var product_id = 0;
            var page = 1;
            function show_product(){ // Function show product
                    product_name = $('#product-name').val();
                    $('.product').remove();
                    $.ajax({
                        url:'view_product.php',
                        type:'POST',
                        data:{
                            product_name: product_name,
                            page: page
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            var num_row = data.num_row;
                            var page_number = data.page_number;
                            $('.page').remove();
                            for(i= 1; i <= page_number; i++ ){
                                $('#page-number1').append("<span class = 'page'>"+i+"</span>");
                            }
                            var stt = 0;
                            $('.number-result').text("Tìm được "+num_row+" kết quả");
                            if(data.num_row >0){
                                for(var i =0; i < num_row;i++){
                                    if(i % 2 == 0){
                                        var odd = 'odd';
                                    }
                                    else{
                                        var odd = 'unodd'
                                    }
                                    stt = i +1;
                                    $('#show-product').append("<div class='product "+odd+"'> </div>");
                                    $('.product').last().append("<p class = 'stt'>"+ stt +"</p>")
                                    $('.product').last().append("<p class='pro-name'>"+data.pro_info[i].pro_name+"</p> ");
                                    $('.product').last().append("<p class='price-sell'>"+data.pro_info[i].pro_price_sell+"</p>");
                                    $('.product').last().append("<p class='price-buy'>"+data.pro_info[i].pro_price_buy+"</p>");
                                    $('.product').last().append("<p class='quantity'>"+data.pro_info[i].pro_quantity+"</p>");
                                    $('.product').last().append("<p class='delete-product' pro-id ='"+data.pro_info[i].pro_id+"'>Delete</p>");
                                    $('.product').last().append("<p class='edit-product' pro-id ='"+data.pro_info[i].pro_id+"'>Edit</p>");
                                    $('.product').last().append("<p class='update-product' pro-id ='"+data.pro_info[i].pro_id+"'>Update</p>");
                                }
                            }
                            
                           
                        }
                        
                    })
                
            }
            function show_cate(class_name){// function show categories for a select option
                $.ajax({
                        url:'view_cate.php',
                        type:'POST',
                        data:{
                            product_id : product_id
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            for(i in data){
                                $(class_name).append("<option class = 'cate-name' value = '"+data[i].cate_id+"'>"+data[i].cate_name+"</option>")
                            }
                        }
                        
                    })
            }
            function edit_product(){ //Function update product
                $('#acept-edit').click(function(){
                    var product_id = $('#edit-form').attr('pro-id');
                    var pro_name = $('.edit-pro-name').val();
                    var cate_id = $('.edit-pro-cate').val();
                    var price_sell = $('.edit-pro-price-sell').val();
                    price_sell = parseInt(price_sell);
                    var price_buy = $('.edit-pro-price-buy').val();
                    price_buy = parseInt(price_buy);
                    $.ajax({
                        url:'edit_product.php',
                        type:'POST',
                        data:{
                            pro_id : product_id,
                            pro_name : pro_name,
                            cate_id : cate_id,
                            price_sell : price_sell,
                            price_buy : price_buy
                        },
                        success:function(data){
                            show_product();
                        }
                    })
                })
            }
            
            function new_product(){
                $('#acept-new').click(function(){
                    alert('acept-new');
                    var pro_name = $('.new-pro-name').val();
                    var cate_id = $('.new-pro-cate').val();
                    var price_sell = $('.new-pro-price-sell').val();
                    price_sell = parseInt(price_sell);
                    var price_buy = $('.new-pro-price-buy').val();
                    price_buy = parseInt(price_buy);
                    
                    $.ajax({
                        url: 'new_product.php',
                        type: 'POST',
                        data:{
                            pro_name : pro_name,
                            cate_id : cate_id,
                            price_sell : price_sell,
                            price_buy : price_buy
                        },
                        success:function(data){
                            show_product();
                        }
                    })
                })
            }
            $(function(){
                $('#show-product').on('click','.product .delete-product',function(even){
                    pro_id = $(this).attr('pro-id');
                    $.ajax({
                        url:'delete_product.php',
                        type:'POST',
                        data:{
                            pro_id : pro_id
                        },
                        success:function(data){
                            if(data == 1){
                                show_product();
                            }
                            else alert('xoa khong thanh cong');
                        }
                    })
                })
            })
            
            $(function(){    
                show_product();
                $('#product-name').keyup(function(){
                    show_product();
                })
                 $('#send').click(function(){
                        show_product();    
                 })
                
            })
            $(function(){ // New a product
                $('#new-product').click(function(){
                    $('.opacity').css({
                        'display':'block'
                    })
                    $('#new-product-form').fadeIn(300)
                    show_cate('.new-pro-cate');
                })
            })
            
            $(function(){
                $('#show-product').on('click','.edit-product',function(even){
                    product_id = $(this).attr('pro-id');
                    $('.opacity').css({
                        'display':'block'
                    })
                    $('#edit-form').fadeIn(300)
                    $('#edit-form').attr('pro-id',product_id);
                    $.ajax({
                        url:'view_pro_id.php',
                        type:'POST',
                        data:{
                            product_id : product_id
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            $('.edit-pro-name').val(data.pro_info[0].pro_name);
                            $('.cate-first').remove();
                            $('.edit-pro-cate').append("<option class='cate-first'></option>")
                            $('.cate-first').text(data.pro_info[0].cate_name);
                            $('.edit-pro-price-sell').val(data.pro_info[0].pro_price_sell);
                            $('.edit-pro-price-buy').val(data.pro_info[0].pro_price_buy);
                            $('#bg-img-index').attr('src','../images/product/'+data.pro_info[0].pro_img);
                        }
                    })
                    $('.cate-name').remove();// tránh việc lặp lại của cate
                    show_cate('.edit-pro-cate');
                })
                $('.opacity').click(function(){
                    $(this).css({
                        'display':'none'
                    })
                    $('#edit-form').fadeOut(300)
                    $('#new-product-form').fadeOut(300)
                })
                $('#image-index').hover(function(){
                    $('#hover1').css({
                        'display':'block'
                    })
                },function(){
                    $('#hover1').css({
                        'display':'none'
                    })
                })
                
                
            })
            $(function(){
                edit_product();
                new_product();
                $('#page-number1').on('click','.page',function(even){
                    page = parseInt($(this).text());
                    show_product(); 
                })
                
            })

        </script>
    </head>
    <body>
        <div class="opacity"></div>
        <div id="edit-form">
            <div class="edit-left"></div>
            <div class="edit-right">
                <h2 class="title1">THAY ĐỔI THÔNG TIN SẢN PHẨM</h2>
                <div class="form-info">
                    <p >Tên sản phẩm  </p> <input type="text" class="edit-pro-name"/>                    
                    <div class="clear height2"></div>
                    <p >Nhóm sản phẩm  </p>
                    <select class="edit-pro-cate">
                        <option class="cate-first">Phòng ngủ</option>
                    </select>                  
                    <div class="clear height2"></div>
                    <p >Giá bán  </p> <input type="text" class="edit-pro-price-sell"/>
                    <div class="clear height2"></div>
                    <p >Giá mua  </p> <input type="text" class="edit-pro-price-buy"/>
                    <div class="clear height2"></div>
                    <p>Ảnh đại diện  </p>
                    <div id="wrap-img-index">
                        <img src="../images/product/1.jpg" id="bg-img-index"/>
                        <div id="hover1"><p>Thay đổi ảnh đại diện</p></div>
                        <input type="file" id="image-index" />
                        
                    </div>
                    <div class="clear height2"></div>
                    <p style="color: red; font-weight: bold;">Tồn kho  </p> <input type="text" id="warning"  />
                    <div class="clear height2"></div>
                    <h5 style="color: red; margin-left: 125px;">Chú ý: Tồn kho chỉ chỉnh sửa khi cần thiết</h5>
                    <input id="acept-edit" type="button" value="Acept" />
                 </div>
                
            </div>
        
        </div><!--end edit product form-->
        <div id="new-product-form">
            <div class="new-left"></div>
            <div class="new-right">
                <h2 class="title1">THÊM SẢN PHẨM</h2>
                <div class="form-info">
                    <p >Tên sản phẩm  </p> <input type="text" class="new-pro-name"/>                    
                    <div class="clear height2"></div>
                    <p >Nhóm sản phẩm  </p>
                    <select class="new-pro-cate">
                        <option class="cate-first">Phòng ngủ</option>
                    </select>                  
                    <div class="clear height2"></div>
                    <p >Giá bán  </p> <input type="text" class="new-pro-price-sell"/>
                    <div class="clear height2"></div>
                    <p >Giá mua  </p> <input type="text" class="new-pro-price-buy"/>
                    <div class="clear height2"></div>
                    <p>Ảnh đại diện  </p>
                    <div id="wrap-img-index">
                        <img src="../images/product/1.jpg" id="bg-img-index"/>
                        <div id="hover1"><p>Thay đổi ảnh đại diện</p></div>
                        <input type="file" id="image-index" />
                        
                    </div>
                    <div class="clear height2"></div>
                    <p style="color: red; font-weight: bold;">Tồn kho  </p> <input type="text" id="warning"  />
                    <div class="clear height2"></div>
                    <h5 style="color: red; margin-left: 125px;">Chú ý: Tồn kho chỉ chỉnh sửa khi cần thiết</h5>
                    <input id="acept-new" type="button" value="Acept" />
                 </div>
                
            </div>
        
        
        </div><!--end new product form-->
        <div id=""></div>
        <div id="outer">
            <div id="wrap">
                <div id="header">
                    <p id="logo">Admin</p>
                    <div class="clear"></div>
                    <ul id="main-menu">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">PRODUCTS</a></li>
                        <li><a href="#">CATEGORIES</a></li>
                        <li><a href="#">STATISTICS</a></li>
                        <li><a href="#">IMAGES</a></li>
                        <li><a href="#">USER</a></li>
                        <li><a href="#">MAIN-MENU</a></li>
                    </ul>
                </div>
                <div id="content">
                    <input type="text" id="product-name"   />
                    <input type="button" id="send" value="send"  />
                    <div class="clear"></div>
                    <p class="number-result"></p>
                    <div id="page-number1">
                        <span>Trang :</span>
                    </div>
                    <div id="show-product">
                        <div class="clear" style="height: 10px;"></div>
                        <div class="product-title">
                            <p class="stt">STT</p>
                            <p class="pro-name">Tên Sản phẩm</p>
                            <p class="price-sell">Giá bán</p>
                            <p class="price-buy">Giá mua</p>
                            <p class="quantity">Tồn kho</p>
                            <p id="new-product">New Product</p>
                        </div>    
                    </div>
                    
                </div><!--end content-->
            </div>
        
        </div>
    
    </body>

</html>